<template>
    <div ref="yamlEditor" style="height: 100%;"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref, unref } from 'vue';
import { basicSetup } from "codemirror";
import { EditorState } from "@codemirror/state"
import { EditorView } from "@codemirror/view"
import { oneDark } from '@codemirror/theme-one-dark'
import { javascript, javascriptLanguage } from "@codemirror/lang-javascript"
import { activeCode } from "../settings/local"
const yamlEditor = ref()

let editor: EditorView;

async function initRuleEditorEntity(dom: HTMLDivElement) {
    const startState = EditorState.create({
        doc: activeCode.value,
        extensions: [
            basicSetup,
            oneDark,
            javascript(),
            EditorView.updateListener.of((v) => {
                activeCode.value = v.state.doc.toString()
            }),
        ],

    })

    if (dom) {
        editor = new EditorView({
            state: startState,
            parent: dom,
            extensions: [
                javascriptLanguage
            ]
        });
    }
}

onMounted(() => {
    initRuleEditorEntity(unref(yamlEditor))
})
</script>
